import {
  Typography,
  Tabs,
  Tab,
  Box,
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableBody,
  Paper,
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  TextField,
  DialogActions,
} from '@mui/material';
import { useState } from 'react';

interface Model {
  id: string;
  name: string;
  size: string;
  content: string;
  weight: number;
  author: string;
  validUntil: string;
  type: 'internal' | 'external';
}

const initialModels: Model[] = [
  {
    id: '1',
    name: 'GPT-Internal',
    size: '2GB',
    content: '自然语言处理',
    weight: 0.9,
    author: 'OpenAI',
    validUntil: '2026-12-31',
    type: 'internal',
  },
  {
    id: '2',
    name: 'Vision-Pro',
    size: '1.2GB',
    content: '图像识别',
    weight: 0.82,
    author: 'Apple AI Lab',
    validUntil: '2026-08-15',
    type: 'internal',
  },
  {
    id: '3',
    name: 'SpeechMaster',
    size: '800MB',
    content: '语音识别',
    weight: 0.75,
    author: 'Google DeepMind',
    validUntil: '2025-12-01',
    type: 'internal',
  },
  {
    id: '4',
    name: 'TranslatePro',
    size: '1.5GB',
    content: '机器翻译',
    weight: 0.78,
    author: 'External Inc',
    validUntil: '2025-06-30',
    type: 'external',
  },
  {
    id: '5',
    name: 'WeatherAI',
    size: '1.1GB',
    content: '天气预测',
    weight: 0.68,
    author: 'MeteoTech',
    validUntil: '2026-03-20',
    type: 'external',
  },
  {
    id: '6',
    name: 'BioGen-AI',
    size: '2.3GB',
    content: '基因分析',
    weight: 0.88,
    author: 'Genomics Lab',
    validUntil: '2027-01-01',
    type: 'external',
  },
];

export default function ModelManagement() {
  const [tab, setTab] = useState(0);
  const [models, setModels] = useState<Model[]>(initialModels);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingModel, setEditingModel] = useState<Partial<Model>>({ type: 'internal' });

  const filteredModels = models.filter((m) => m.type === (tab === 0 ? 'internal' : 'external'));

  const openNewModelDialog = () => {
    setEditingModel({ type: tab === 0 ? 'internal' : 'external' });
    setDialogOpen(true);
  };

  const openEditModelDialog = (model: Model) => {
    setEditingModel({ ...model });
    setDialogOpen(true);
  };

  const saveModel = () => {
    if (!editingModel.name || !editingModel.id) {
      const newModel = {
        ...editingModel,
        id: Date.now().toString(),
      } as Model;
      setModels((prev) => [...prev, newModel]);
    } else {
      setModels((prev) =>
        prev.map((m) => (m.id === editingModel.id ? (editingModel as Model) : m))
      );
    }
    setDialogOpen(false);
  };

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        模型管理
      </Typography>
      <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
        <Tab label="Internal Models" />
        <Tab label="External Models" />
      </Tabs>
      <Box sx={{ mb: 2 }}>
        <Button variant="contained" onClick={openNewModelDialog}>
          Add Model
        </Button>
      </Box>
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell>Size</TableCell>
              <TableCell>Content</TableCell>
              <TableCell>Weight</TableCell>
              <TableCell>Author</TableCell>
              <TableCell>Valid Until</TableCell>
              <TableCell>Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {filteredModels.map((model) => (
              <TableRow key={model.id}>
                <TableCell>{model.name}</TableCell>
                <TableCell>{model.size}</TableCell>
                <TableCell>{model.content}</TableCell>
                <TableCell>{model.weight}</TableCell>
                <TableCell>{model.author}</TableCell>
                <TableCell>{model.validUntil}</TableCell>
                <TableCell>
                  <Button size="small" onClick={() => openEditModelDialog(model)}>
                    Edit
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>

      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} fullWidth>
        <DialogTitle>{editingModel.id ? 'Edit Model' : 'Add Model'}</DialogTitle>
        <DialogContent>
          <TextField
            margin="dense"
            label="Name"
            fullWidth
            value={editingModel.name || ''}
            onChange={(e) => setEditingModel({ ...editingModel, name: e.target.value })}
          />
          <TextField
            margin="dense"
            label="Size"
            fullWidth
            value={editingModel.size || ''}
            onChange={(e) => setEditingModel({ ...editingModel, size: e.target.value })}
          />
          <TextField
            margin="dense"
            label="Content"
            fullWidth
            value={editingModel.content || ''}
            onChange={(e) => setEditingModel({ ...editingModel, content: e.target.value })}
          />
          <TextField
            margin="dense"
            label="Weight"
            type="number"
            fullWidth
            value={editingModel.weight || ''}
            onChange={(e) => setEditingModel({ ...editingModel, weight: parseFloat(e.target.value) })}
          />
          <TextField
            margin="dense"
            label="Author"
            fullWidth
            value={editingModel.author || ''}
            onChange={(e) => setEditingModel({ ...editingModel, author: e.target.value })}
          />
          <TextField
            margin="dense"
            label="Valid Until"
            type="date"
            fullWidth
            InputLabelProps={{ shrink: true }}
            value={editingModel.validUntil || ''}
            onChange={(e) => setEditingModel({ ...editingModel, validUntil: e.target.value })}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDialogOpen(false)}>Cancel</Button>
          <Button onClick={saveModel} variant="contained">Save</Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}
